<script setup>
import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue';

const props = defineProps({
  images: {
    type: Array,
    required: true
  },
  currentIndex: {
    type: Number,
    required: true
  },
});

const emit = defineEmits(['view-details', 'update-index']);

const currentIndex = ref(props.currentIndex);
const intervalId = ref(null);

const handleViewDetails = () => {
  emit('view-details');
};

const prevImage = () => {
  let newIndex = currentIndex.value - 1;
  if (newIndex < 0) {
    newIndex = props.images.length - 1;
  }
  currentIndex.value = newIndex;
  emit('update-index', newIndex);
};

const nextImage = () => {
  let newIndex = (currentIndex.value + 1) % props.images.length;
  currentIndex.value = newIndex;
  emit('update-index', newIndex);
};

const startBackgroundRotation = () => {
  intervalId.value = setInterval(nextImage, 3000);
};

const stopBackgroundRotation = () => {
  clearInterval(intervalId.value);
};

const imageUrl = computed(() => {
  return props.images[currentIndex.value];
});

onMounted(() => {
  startBackgroundRotation();
});

onBeforeUnmount(() => {
  stopBackgroundRotation();
});
</script>

<template>
  <div class="carousel">
    <img :src="imageUrl" alt="Carousel Image" class="carousel-image" />
    <button @click="prevImage" class="carousel-button prev">‹</button>
    <button @click="nextImage" class="carousel-button next">›</button>
    <button @click="handleViewDetails" class="carousel-button details">View Details</button>
  </div>
</template>

<style scoped>
.carousel {
  position: relative;
  width: 100vw;
  /* 充满视口宽度 */
  height: 100vh;
  /* 充满视口高度 */
  /* overflow: hidden; */
  /* 隐藏超出部分 */
}

.carousel-image {
  width: 100%;
  /* 图片宽度充满容器 */
  height: 100%;
  /* 图片高度充满容器 */
  object-fit: cover;
  /* 按比例缩放，覆盖整个容器 */
  object-position: center;
  /* 图片居中显示 */
}

.carousel-button {
  position: absolute;
  /* 使用 absolute 定位，相对于父元素 */
  background-color: rgba(0, 0, 0, 0.7);
  /* 黑色背景，70% 透明度 */
  color: white;
  border: none;
  padding: 12px 24px;
  /* 调整按钮内边距 */
  cursor: pointer;
  z-index: 10;
  border-radius: 25px;
  /* 圆角 */
  font-size: 16px;
  /* 文字大小 */
  font-weight: bold;
  /* 加粗文字 */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* 添加过渡效果 */
}

.carousel-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
  /* 鼠标悬停时背景更黑 */
  transform: scale(1.05);
  /* 悬停时轻微放大 */
}

.carousel-button.prev {
  font-size: 2em;
  left: 20px;
  /* 固定在视口左边 */
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
  /* 垂直居中 */
}

.carousel-button.next {
  font-size: 2em;
  right: 20px;
  /* 固定在视口右边 */
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
  /* 垂直居中 */
}

.carousel-button.details {
  bottom: 20px;
  /* 固定在视口底部 */
  left: 50%;
  /* 水平居中 */
  transform: translateX(-50%);
  /* 水平居中 */
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 25px;
  height: 48px;
  /* 设置固定高度 */
  padding: 0 24px;
  /* 去除上下内边距，保持高度 */
  line-height: 48px;
  /* 设置行高与按钮高度相同，使文本居中 */
}
</style>